import { useState } from 'react';
import { 
    Box, 
    TextField, 
    Button, 
    Typography, 
    Paper,
    Grid,
    FormControl,
    InputLabel,
    Select,
    MenuItem,
    Slider
} from '@mui/material';
import ToolPageTemplate from '@/components/ToolPageTemplate';
import QrCodeIcon from '@mui/icons-material/QrCode';

const QRCodePage = () => {
    const [text, setText] = useState('');
    const [size, setSize] = useState(200);
    const [errorLevel, setErrorLevel] = useState('M');

    const generateQRCode = () => {
        console.log('生成二维码:', { text, size, errorLevel });
    };

    return (
        <ToolPageTemplate 
            title="二维码生成器"
            description="将文本、链接转换为二维码，支持自定义尺寸和纠错级别"
            category="生成器"
            categoryColor="#1565c0"
        >
            <Grid container spacing={4}>
                <Grid item xs={12} md={6}>
                    <Box sx={{ mb: 3 }}>
                        <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
                            二维码内容
                        </Typography>
                        <TextField
                            fullWidth
                            multiline
                            rows={4}
                            placeholder="请输入要生成二维码的文本或链接..."
                            value={text}
                            onChange={(e) => setText(e.target.value)}
                            sx={{ mb: 3 }}
                        />
                    </Box>

                    <Box sx={{ mb: 3 }}>
                        <Typography variant="body1" sx={{ mb: 2 }}>
                            尺寸: {size}px
                        </Typography>
                        <Slider
                            value={size}
                            onChange={(_, value) => setSize(value as number)}
                            min={100}
                            max={500}
                            step={10}
                            valueLabelDisplay="auto"
                        />
                    </Box>

                    <FormControl fullWidth sx={{ mb: 3 }}>
                        <InputLabel>纠错级别</InputLabel>
                        <Select
                            value={errorLevel}
                            label="纠错级别"
                            onChange={(e) => setErrorLevel(e.target.value)}
                        >
                            <MenuItem value="L">低 (7%)</MenuItem>
                            <MenuItem value="M">中 (15%)</MenuItem>
                            <MenuItem value="Q">较高 (25%)</MenuItem>
                            <MenuItem value="H">高 (30%)</MenuItem>
                        </Select>
                    </FormControl>

                    <Button 
                        variant="contained" 
                        size="large"
                        startIcon={<QrCodeIcon />}
                        onClick={generateQRCode}
                        disabled={!text.trim()}
                        fullWidth
                    >
                        生成二维码
                    </Button>
                </Grid>

                <Grid item xs={12} md={6}>
                    <Paper 
                        elevation={0}
                        sx={{ 
                            p: 3, 
                            textAlign: 'center',
                            bgcolor: 'grey.50',
                            minHeight: 300,
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            border: '2px dashed',
                            borderColor: 'grey.300'
                        }}
                    >
                        {text ? (
                            <Box>
                                <Box 
                                    sx={{ 
                                        width: Math.min(size, 250),
                                        height: Math.min(size, 250),
                                        bgcolor: 'white',
                                        border: '1px solid',
                                        borderColor: 'grey.300',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        mx: 'auto',
                                        mb: 2
                                    }}
                                >
                                    <QrCodeIcon sx={{ fontSize: 100, color: 'grey.400' }} />
                                </Box>
                                <Typography variant="body2" color="text.secondary">
                                    二维码预览区域
                                </Typography>
                            </Box>
                        ) : (
                            <Typography variant="body1" color="text.secondary">
                                请输入内容以生成二维码
                            </Typography>
                        )}
                    </Paper>
                </Grid>
            </Grid>
        </ToolPageTemplate>
    );
};

export default QRCodePage;